互动消息是用于加强直播间消息沟通、提升交互体验的服务。提供了丰富、易集成的SDK,可在用户开发的直播应用中轻松集成评论、弹幕、点赞等能力。本文介绍Web端集成互动消息的操作步骤。
前提条件
客户端集成前,请确保已经完成服务端集成,并提供客户端访问的获取鉴权Token的接口。服务端集成操作指引,请参见服务端集成。
浏览器支持
Web端SDK依赖浏览器对WebRTC技术的支持,支持的浏览器版本如下:
Chrome 63+
Firefox 62+
Opera 15+
Edge 79+
Safari 11+
集成SDK
在script标签中引入SDK。
<script src='https://g.alicdn.com/apsara-media-box/imp-interaction/1.2.1/alivc-im.iife.js'></script>
使用以下文件为SDK增加类型定义,提升开发体验。下载地址参见SDK增加类型定义。
使用SDK
SDK使用需遵循如下操作顺序:
初始化
登录
相关操作
登出
反初始化
其中相关操作包含群组操作和消息操作,详细说明如下:
SDK操作
群组操作
创建群组(需要以管理员身份进行登录才能操作)
关闭群组(仅限群主/群管理员操作)
进入群组
离开群组
查询群组信息
修改群组消息(仅限群主/群管理员操作)
查询群组最近成员列表
查询群组全部成员(仅限群主/群管理员操作)
对群组进行禁言(仅限群主/群管理员操作)
对群组取消禁言(仅限群主/群管理员操作)
对群组的用户进行禁言(仅限群主/群管理员操作)
对群组的用户取消禁言(仅限群主/群管理员操作)
查询群组内被禁言的用户列表(仅限群主/群管理员操作)
消息操作
单发消息
群发消息
查询最近群发消息列表
查询全部群发消息(仅限群主/群管理员操作)
删除/撤回群消息
查询历史消息
初始化
使用前需要进行初始化,可以在相关业务模块的主入口设置。
示例代码
const { ImEngine, ImLogLevel } = AliVCInteraction;
// 获取引擎单例
const engine = ImEngine.createEngine();
await engine.init({
deviceId: "xxxx", // 设备ID,可选传入
appId: "APP_ID", // 开通应用后可以在控制台上拷贝
appSign: "APP_SIGN", // 开通应用后可以在控制台上拷贝
logLevel: ImLogLevel.ERROR, // 日志级别,调试时使用 ImLogLevel.DBUG
});
// 处理回调事件 AliVCIMEngineListenerProtocol
engine.on("connecting", () => {
console.log("connecting");
});
engine.on("connectfailed", (err) => {
console.log(`connect failed: ${err.message}`);
});
engine.on("connectsuccess", () => {
console.log("connect success");
});
engine.on("disconnect", (code: number) => {
console.log(`disconnect: ${code}`);
});
engine.on("tokenexpired", async (cb) => {
console.log("token expired");
// 这里需要更新为获取新的登录信息的代码
const auth = await getLoginAuth();
cb(null, {
timestamp: 22123123, // 服务端返回timestamp值
nonce: 'nonce', // 服务端返回nonce值
role: 'admin', // 是否为admin角色,如果不需要可以设置为空
token: 'xxx' // 服务端返回token值
});
});
登录
登录需要鉴权信息,请确保已完成前提条件设置,并已通过服务端获取到了鉴权信息,包括timestamp、nonce、token等值。
示例代码
await engine.login({
user: {
userId: 'abc', // 当前app登录的用户id
userExtension: '{}', // 用户扩展信息,可以是头像、昵称等封装为json字符串
},
userAuth: {
timestamp: 22123123, // 服务端返回timestamp值
nonce: 'nonce', // 服务端返回nonce值
role: 'admin', // 是否为admin角色,如果不需要可以设置为空
token: 'xxx' // 服务端返回token值
},
});
群组操作
获取群组管理器
// 必须确保已经初始化,否则会返回空值
const groupManager = engine.getGroupManager();
添加群组操作监听器
// 在适当的时机(例如进入房间后,且完成登录后)添加群组操作事件监听器
groupManager.on('exit', (groupId: string, reason: number) => {
// 退出群组
console.log(`group ${groupId} close, reason: ${reason}`);
})
groupManager.on('memberchange', ((groupId: string, memberCount: number, joinUsers: ImUser[], leaveUsers: ImUser[])) => {
// 有人进入或离开群组
console.log(`group ${groupId} member change, memberCount: ${memberCount}, joinUsers: ${joinUsers.map(u => u.userId).join(',')}, leaveUsers: ${leaveUsers.map(u => u.userId).join('')}`);
})
groupManager.on('mutechange', (groupId: string, status) => {
// 群组的禁言状态发生了变化
console.log(`group ${groupId} mute change`);
})
groupManager.on('infochange', (groupId: string, info) => {
// 有人离开了群组
console.log(`group ${groupId} info change`);
})
创建群组
需要以管理员身份进行登录才能调用成功。
await groupManager.createGroup({
groupId: '', // 群组ID,为空时,系统创建新群组后会返回唯一ID
groupName: 'xxx', // 群组昵称,一定要设置,否则会失败
groupMeta: 'xxx' // 群组扩展信息,如果有多个字段可以考虑封装为JSON字符串
});
关闭群组
仅限群主/群管理员调用,否则会调用失败。
// 参数为 groupId
await groupManager.closeGroup('xxx');
进入群组
// 参数为 groupId
await groupManager.joinGroup('xxx');
离开群组
// 参数为 groupId
await groupManager.leaveGroup('xxx');
查询群组信息
// 参数为 groupId
const groupInfo = await groupManager.queryGroup('xxx');
修改群组消息
支持修改群扩展信息和设置管理员,仅限群主/群管理员调用,否则会调用失败。
await groupManager.modifyGroup({
groupId: 'xxx', // 群组ID
admins: ['xxx'], // 群管理员ID 列表, 不修改留空
groupMeta: 'xxx' // 群信息扩展信息Meta,不修改留空
});
查询群组最近成员列表
// 参数为 groupId
const recentGroupUserInfo = groupManager.listRecentGroupUser(groupId);
查询群组全部成员
仅限群主/群管理员调用,否则会调用失败。
const recentGroupUserInfo = groupManager.listGroupUser({
groupId: 'xxx', // 群组ID
nextpagetoken: 12, // 默认表示第一页,遍历时服务端会返回,客户端获取下一页时,应带上
pageSize: 10, // 最大不超过50
sortType: ImSortType.ASC // 排序方式,ASC-先加入优先,DESC-后加入优先
});
对群组进行禁言
仅限群主/群管理员调用,否则会调用失败。
// 参数为 groupId
await groupManager.muteAll('xxx');
对群组取消禁言
仅限群主/群管理员调用,否则会调用失败。
// 参数为 groupId
await groupManager.cancelMuteAll('xxx');
对群组的用户进行禁言
仅限群主/群管理员调用,否则会调用失败。
await groupManager.muteUser({
groupId: 'xxx', // 群组ID
userList: ['xxx'] // 需要禁言的用户ID列表
});
对群组的用户取消禁言
仅限群主/群管理员调用,否则会调用失败。
await groupManager.cancelMuteUser({
groupId: 'xxx', // 群组ID
userList: ['xxx'] // 需要取消禁言的用户ID列表
});
查询群组内被禁言的用户列表
仅限群主/群管理员调用,否则会调用失败。
// 参数为 groupId
const muteUsersInfo = await groupManager.listMuteUsers('xxx');
消息操作
获取消息管理器
// 必须确保已经初始化,否则会返回空值
const messageManager = await engine.getMessageManager();
监听消息
// 收到其他用户发来的单聊消息
messageManager.on("recvc2cmessage", (msg) => {
console.log('recvc2cmessage', msg);
});
// 收到群聊消息
messageManager.on("recvgroupmessage", (msg, channelId) => {
console.log('recvgroupmessage', msg);
});
// 群消息删除
messageManager.on('deletegroupmessage', (msgId, groupId) => {
console.log(`group ${groupId} delete message ${msgId}`)
});
单发消息
await messageManager.sendC2cMessage({
receiverId: 'xxx', // 接受者id
data: 'xxx', // 发送消息内容,如果是结构化可考虑使用JSON字符串
type: 88888, // 自定义消息类型,需大于10000
skipAudit: false, // 可选(默认 false),跳过安全审核,true:发送的消息不经过阿里云安全审核服务审核;false:发送的消息经过阿里云安全审核服务审核,审核失败则不发送。
level: ImMessageLevel.NORMAL // 可选(默认 NORMAL), 消息分级,需要高可靠时,使用 ImMessageLevel.HIGH
})
群发消息
await messageManager.sendGroupMessage({
groupId: 'xxx', // 群组id
data: 'xxx', // 发送消息内容,如果是结构化可考虑使用json字符串
type: 88888, // 自定义消息类型,需大于10000
skipAudit: false, // 可选(默认 false),跳过安全审核,true:发送的消息不经过阿里云安全审核服务审核;false:发送的消息经过阿里云安全审核服务审核,审核失败则不发送。
skipMuteCheck: false, // 可选(默认 false),跳过禁言检测,true:忽略被禁言用户,还可发消息;false:当被禁言时,消息无法发送
level: ImMessageLevel.NORMAL, // 可选(默认 NORMAL), 消息分级,需要高可靠时,使用 ImMessageLevel.HIGH
noStorage: true, // 可选(默认 false)true:表示该消息不需要存储,也无法拉取查询;false:消息进行存储,可以拉取查询。如果在直播间的弹幕场景,需要设置为 false。
repeatCount: 1 // 可选(默认 1)本消息重复数量,内容完成一样的消息可以使用该字段进行聚合,并发送一次即可。
})
删除/撤回群消息
await messageManager.deleteMessage({
groupId: 'xxx', // 群组id
messageId: 'xxx', // 需要删除的消息 id
});
查询最近群发消息列表
const messagesInfo = await messageManager.listRecentMessage({
groupId: 'xxx', // 群组id
})
查询全部群发消息
仅限群主/群管理员调用,否则会调用失败。
const messagesInfo = messageManager.listMessage({
groupId: 'xxx', // 群组ID
type: 88888, // 自定义消息类型,需大于10000
nextpagetoken: 12, // 不传时表示第一页,遍历时服务端会返回下一页Token,客户端获取下一页时应带上
pageSize: 10, // 默认10条,最大30条
sortType: ImSortType.ASC // 排序方式,默认为时间递增
});
查询历史消息
const messagesInfo = messageManager.listMessage({
groupId: 'xxx', // 群组ID
type: 88888, // 消息类型,自定义消息类型需大于10000
nextpagetoken: 12, // 可选,不传时表示第一页,遍历时服务端会返回下一页Token,客户端获取下一页时应带上
pageSize: 10, // 默认10条,最大30条
sortType: ImSortType.ASC, // 排序方式,默认为时间递增
begintime: 0, // 可选(默认 0),开始时间,秒级时间戳
endTime: 0 // 可选(默认 0),结束时间,秒级时间戳
});
登出
await engine.logout();
反初始化
登出后如无需再进行登录,可以进行反初始化操作,SDK会对底层操作实例进行释放。
engine.unInit()
- 本页导读 (1)